<!-- src/components/DrawerPanel.vue -->
<template>
    <div class="drawer-overlay" :class="{ open: visible }" @click="closeDrawer">
        <div class="drawer-panel" :class="{ open: visible }" @click.stop>
            <div class="drawer-header">
                <h3 class="drawer-title">事件信息面板</h3>
                <div style="display: flex; gap: 8px">
                    <button class="close-btn" @click="closeDrawer">×</button>
                </div>
            </div>
            <el-collapse v-model="activeName" accordion @change="handleCollapseChange">
                <el-collapse-item v-for="(order, index) in workOrders" :key="order.id" :name="order.id">
                    <template slot="title">
                        <span>事件编号（{{ order.workNo }}）</span>
                    </template>

                    <div class="work-content">
                        <div class="item-content">
                            <div class="left">事件名称</div>
                            <div class="right">{{ order.eventTitle }}</div>
                        </div>
                        <div class="item-content">
                            <div class="left">发布时间</div>
                            <div class="right">{{ order.createTime }}</div>
                        </div>
                        <div class="item-content">
                            <div class="left">线别</div>
                            <div class="right">{{ order.lineName }}</div>
                        </div>
                        <div class="item-content">
                            <div class="left">地点</div>
                            <div class="right">{{ order.locationName }}</div>
                        </div>
                        <div class="item-content">
                            <div class="left">车号</div>
                            <div class="right">{{ order.trainNo }}</div>
                        </div>
                        <div class="item-content">
                            <div class="left">事件场景</div>
                            <div class="right">{{ order.eventName }}</div>
                        </div>
                        <div class="item-content">
                            <div class="left">应急响应级别</div>
                            <div class="right">{{ order.level }}</div>
                        </div>
                        <div class="item-content">
                            <div class="left">应急类型</div>
                            <div class="right">{{ order.type }}</div>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
import { getWorkOrderList, getWorkOrderUserByWorkNo, getLocationUserByUserWork } from "@/api/bussiness/bussiness";

export default {
    name: "DrawerPanel",
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            activeName: "1",
            activePanels: {}, // 存储所有展开状态 { 任务id: boolean, 任务id_personnel: boolean }
            workOrders: [], // 任务列表
            workOrderUsers: {}, // 任务人员数据 { 任务id: [人员...] }
            workOrderUsersLoading: {}, // 人员加载状态 { 任务id: boolean }
            locationViewOpen: {}, // 位置查看打开状态 { userId_workNo: boolean }
            locationViewLoading: {}, // 位置查看加载状态 { userId_workNo: boolean }
            currentLocationViewData: null, // 当前正在查看的位置数据
            personnelSearch: {}, // 存储每个任务的搜索关键词 { 任务id: 搜索词 }
            filteredWorkOrderUsers: {}, // 存储过滤后的人员数据 { 任务id: [过滤后的人员...] }

            //zlj
            currentChooseInfo: {}, //当前选择的信息数据
        };
    },
    methods: {
        closeDrawer() {
            this.$emit("update:visible", false);
        },
        // 空的点击展开收起事件处理函数
        handleCollapseChange(activeNames) {
            // 在这里可以添加您需要的逻辑
            if (activeNames) {
                this.currentChooseInfo = this.workOrders.find(item => item.id === activeNames);
                // 面板展开时的处理逻辑
            } else {
                // 面板收起时的处理逻辑
                this.currentChooseInfo = {};
            }
            this.$emit("currentInfo", this.currentChooseInfo);
        },

        // 人员列表展开/收起：展开时请求数据
        togglePersonnelCollapse(order) {
            const key = order.id + "_personnel";
            this.activePanels[key] = !this.activePanels[key];
            if (this.activePanels[key]) {
                this.fetchWorkOrderUser(order);
            }
        },

        // 修改 fetchWorkOrderUser 方法，在获取数据后初始化过滤数据
        fetchWorkOrderUser(order) {
            this.$set(this.workOrderUsersLoading, order.id, true);
            getWorkOrderUserByWorkNo(order.workNo)
                .then(response => {
                    console.log("getWorkOrderUserByWorkNo 响应数据:", response);
                    if (response.code === 200 && response.data) {
                        this.$set(this.workOrderUsers, order.id, response.data);

                        // 初始化过滤后的数据为全部人员
                        this.$set(this.filteredWorkOrderUsers, order.id, response.data);

                        // 转换人员数据格式，供地图标记使用
                        const personnelData = response.data.map(user => ({
                            id: user.id,
                            userNo: user.userNo,
                            workNo: order.workNo,
                            name: user.userName,
                            longitude: user.longitude ? parseFloat(user.longitude) : null,
                            latitude: user.latitude ? parseFloat(user.latitude) : null,
                            telephone: user.telephone || "",
                            online: user.status === "1", // status === '1' 表示在线
                        }));

                        // 将转换后的人员数据emit给父组件
                        this.$emit("updatePersonnelHistory", personnelData);
                        console.log("人员数据已发送给地图:", personnelData);
                    }
                })
                .catch(error => {
                    console.error("获取任务人员信息失败:", error);
                })
                .finally(() => {
                    this.$set(this.workOrderUsersLoading, order.id, false);
                });
        },
        // 查看/关闭位置信息
        toggleLocationView(user, order) {
            const key = user.id + "_" + order.workNo;
            const newValue = !this.locationViewOpen[key];

            if (newValue) {
                // 打开新的位置查看前，先关闭所有其他已打开的位置
                Object.keys(this.locationViewOpen).forEach(k => {
                    if (k !== key && this.locationViewOpen[k]) {
                        this.$set(this.locationViewOpen, k, false);
                    }
                });

                // 打开当前位置
                this.$set(this.locationViewOpen, key, true);

                // 打印参数
                const params = {
                    userNo: user.userNo,
                    workNo: order.workNo,
                };
                console.log("getLocationUserByUserWork 请求参数:", params);

                // 保存当前位置查看数据
                this.currentLocationViewData = {
                    user: user,
                    order: order,
                    params: params,
                };

                this.fetchLocationUserByUserWork(user.id, user.userNo, order.workNo);
            } else {
                // 关闭当前位置
                this.$set(this.locationViewOpen, key, false);

                // 关闭时清空数据
                this.currentLocationViewData = null;
                this.$emit("updateLocationView", null);
            }
        },
        // 获取人员位置轨迹
        fetchLocationUserByUserWork(userId, userNo, workNo) {
            const key = userId + "_" + workNo;
            this.$set(this.locationViewLoading, key, true);
            getLocationUserByUserWork(userNo, workNo)
                .then(response => {
                    console.log("getLocationUserByUserWork 响应数据:", response);
                    // 将响应数据添加到当前位置查看数据中

                    if (this.currentLocationViewData && response.data) {
                        this.currentLocationViewData.response = response;
                        // 发送完整数据给父组件
                        if (response.code === 200) {
                            this.$emit("updateLocationView", this.currentLocationViewData);
                        }
                    }
                })
                .catch(error => {
                    console.error("获取人员位置信息失败:", error);
                })
                .finally(() => {
                    this.$set(this.locationViewLoading, key, false);
                });
        },
        // 初始化：获取任务列表，初始化展开状态
        fetchWorkOrderList() {
            const query = {};
            console.log("getWorkOrderList 请求参数:", query);
            getWorkOrderList(query)
                .then(response => {
                    console.log("getWorkOrderList 响应数据:", response);
                    if (response.code === 200 && response.rows) {
                        this.workOrders = response.rows;
                        this.workOrders.forEach(order => {
                            this.$set(this.activePanels, order.id, false);
                            this.$set(this.activePanels, order.id + "_personnel", false);
                        });
                    }
                })
                .catch(error => {
                    console.error("获取任务信息失败:", error);
                });
        },
    },
    mounted() {
        this.fetchWorkOrderList();
    },
};
</script>

<style scoped>
/* 或者使用深度选择器 */
::v-deep .el-collapse-item__wrap {
    padding: 0;
}
::v-deep .el-collapse-item__content {
    padding-bottom: 0;
}
.work-content {
    width: 100%;
    height: 100%;
    background-color: rgb(115 37 203 / 48%);
    padding: 5px 0;
}

.item-content {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 6px;
    width: 96%;
    margin-left: 2%;
}
.left {
    text-align: right;
    padding-right: 10px;
    width: 100px;
    background-color: rgba(3, 46, 134, 0.5333333333);
    color: #88a3d5;
}
.right {
    width: calc(100% - 106px);
    background-color: rgba(6, 73, 173, 0.462745098);
    border-radius: 4px;
    color: #0ecbf0;
}
.drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.drawer-panel {
    position: absolute;

    width: 350px;
    padding-bottom: 10px;
    background: #1a3a6a8a;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #4fc3f7;
    border-radius: 10px;
}

.drawer-panel.open {
    transform: translateX(0);
}

.drawer-header {
    padding: 20px;
    background: #0288d1b3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 10px 10px 0 0;
}

.drawer-title {
    color: white;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.mode-toggle-btn {
    padding: 6px 12px;
    background: rgba(2, 119, 189, 0.3);
    color: #4fc3f7;
    border: 1px solid rgba(79, 195, 247, 0.5);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.mode-toggle-btn:hover {
    background: rgba(2, 119, 189, 0.5);
    border-color: #4fc3f7;
    box-shadow: 0 0 10px rgba(79, 195, 247, 0.3);
}

.close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
}

.collapse-item {
    margin-bottom: 15px;
    background: rgba(12, 30, 62, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(79, 195, 247, 0.3);
    overflow: hidden;
}

.collapse-header {
    padding: 15px;
    background: rgba(2, 119, 189, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.collapse-header:hover {
    background: rgba(2, 119, 189, 0.5);
}

.header-text {
    color: #4fc3f7;
    font-weight: 600;
    font-size: 16px;
}

.arrow {
    color: #4fc3f7;
    transition: transform 0.3s ease;
}

.arrow.rotated {
    transform: rotate(90deg);
}

.collapse-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(12, 30, 62, 0.5);
}

.collapse-content.open {
    max-height: 1000px;
}

.info-item {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(79, 195, 247, 0.1);
}

.info-item:last-child {
    border-bottom: none;
}

.info-item label {
    color: #90caf9;
    font-weight: 500;
}

.info-item span {
    color: #e3f2fd;
    font-weight: 600;
}

.status-running {
    color: #4caf50;
    font-weight: 600;
}

.status-normal {
    color: #2196f3;
    font-weight: 600;
}

.person-list {
    padding: 10px 0;
}

.person-item {
    padding: 5px 15px;
    border-bottom: 1px solid rgba(79, 195, 247, 0.1);
}

.person-item:last-child {
    border-bottom: none;
}

.person-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
}

.person-name {
    color: #e3f2fd;
    font-weight: 600;
    font-size: 16px;
    flex: 1;
}

.person-info > div:last-child {
    display: flex;
    gap: 8px;
    align-items: center;
}

.person-status {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.person-status.online {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.5);
}

.person-status.offline {
    background: rgba(158, 158, 158, 0.2);
    color: #bdbdbd;
    border: 1px solid rgba(158, 158, 158, 0.5);
}

.detail-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.detail-item label {
    color: #90caf9;
}

.detail-item span {
    color: #bbdefb;
}

.action-btn {
    padding: 4px 10px;
    background: rgba(2, 119, 189, 0.3);
    color: #4fc3f7;
    border: 1px solid rgba(79, 195, 247, 0.5);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.action-btn:hover {
    background: rgba(2, 119, 189, 0.5);
    border-color: #4fc3f7;
    box-shadow: 0 0 10px rgba(79, 195, 247, 0.3);
}

.action-btn.active {
    background: rgba(79, 195, 247, 0.3);
    color: white;
    border-color: #4fc3f7;
}

.battery-level {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.battery-fill {
    height: 8px;
    background: linear-gradient(90deg, #0277bd, #4fc3f7);
    border-radius: 4px;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.battery-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.battery-text {
    color: #4fc3f7;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

.personnel-section {
    margin-top: 15px;
}

.personnel-header-collapse {
    padding: 12px 10px;
    background: rgba(2, 119, 189, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.personnel-header-collapse:hover {
    background: rgba(2, 119, 189, 0.3);
}

.personnel-title {
    color: #4fc3f7;
    font-weight: 600;
    font-size: 14px;
}

.person-list {
    max-height: 0;
    overflow: scroll;
    transition: max-height 0.3s ease;
}

.person-list.open {
    max-height: 1000px;
}

.loading-container {
    padding: 20px;
    text-align: center;
}

.loading-text {
    color: #4fc3f7;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.loading-text::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid #4fc3f7;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}
.search-container {
    padding: 10px;
    background: rgba(12, 30, 62, 0.5);
}

.personnel-search-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(2, 119, 189, 0.3);
    border: 1px solid rgba(79, 195, 247, 0.5);
    border-radius: 4px;
    color: #e3f2fd;
    font-size: 14px;
    box-sizing: border-box;
}

.personnel-search-input:focus {
    outline: none;
    border-color: #4fc3f7;
    box-shadow: 0 0 8px rgba(79, 195, 247, 0.6);
}

.personnel-search-input::placeholder {
    color: #90caf9;
    opacity: 0.7;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
</style>
